<template>
  <Block title="市场热点" :subTitle="hotSpots.length ? `更新：${updateTime}` : ''" className="market-hot-spot">
    <template v-if="hotSpots.length">
      <div class="plates">
        <Plate
          v-for="(item, index) in hotSpots"
          :key="index"
          :isCheck="checkedIndex === index"
          :hasIncrease="true"
          :name="item.name"
          :increase="item.increase"
          :plateData="item.plateData"
          @click.native="updateCheckedIndex(index)"
        ></Plate>
      </div>
      <div class="stock-container">
        <div class="limit-ups">
          <div class="title" @click.stop="showPopup">
            涨停个股&nbsp;<span class="num">{{ limitups.length }}</span
            >&nbsp;家<img
              src="//i.thsi.cn/staticS3/mobileweb-upload-static-server.img/m/atom/a5971424-8154-462d-b44a-0f4877b8bc7e.png"
              alt=""
            />
          </div>
          <LimitupPotentiaStock
            v-for="(item, i) in limitups.slice(0, 3)"
            :key="i"
            v-bind="item"
            :notLast="i !== limitups.slice(0, 3).length - 1"
          >
            <div>
              <div class="stock-info" style="margin-top: 8px">
                <div>
                  <span class="label">成交额：</span>
                  <span class="value">{{ item.business | tenThousandFormat }}</span>
                </div>
                <div>
                  <span class="label">明日涨停概率：</span>
                  <span class="value">{{ item.limitupChance | judgeIsNull }}</span>
                </div>
              </div>
              <AiWencai
                v-if="isShowWencai"
                :componentType="1"
                :askText="item.askText"
                class="ai-wencai"
                @click.native="handleClick"
              >
              </AiWencai>
            </div>
          </LimitupPotentiaStock>
          <atom-empty type="search" v-if="!limitups.length" />
        </div>
        <div class="limit-ups potential">
          <div class="title">潜力个股</div>
          <LimitupPotentiaStock
            v-for="(item, i) in potentias.slice(0, 3)"
            :key="i"
            v-bind="item"
            :notLast="i !== potentias.length - 1"
          >
            <div class="stock-info" style="margin-top: 24px">
              <div>
                <span class="label">涨停基因：</span>
                <span class="value">{{ item.limitGene }}</span>
              </div>
              <div>
                <span class="label">实时涨速：</span>
                <span class="value">{{ item.acceleration }}</span>
              </div>
            </div>
            <div class="stock-info" style="margin-top: 16px">
              <div>
                <span class="label">成交额：</span>
                <span class="value">{{ item.business | tenThousandFormat }}</span>
              </div>
              <div>
                <span class="label">流通市值：</span>
                <span class="value">{{ item.marketValue | hundredMillionFormat }}</span>
              </div>
            </div>
          </LimitupPotentiaStock>
          <atom-empty type="search" v-if="!potentias.length" title="暂未筛选出潜力个股" />
        </div>
        <div class="placeholder"></div>
      </div>
      <atom-popup v-model="isShow" round position="bottom" closeable :style="{ height: '80vh' }" get-container="body">
        <div class="container">
          <div class="pop-title">
            涨停个股{{ limitups.length }}家
            <img src="@/assets/img/pop-close.svg" alt="" @click.stop="isShow = false" />
          </div>
          <div class="pop-body">
            <LimitupPotentiaStock
              v-for="(item, i) in limitups"
              :key="i"
              v-bind="item"
              :notLast="i !== limitups.length - 1"
            >
              <div>
                <div class="stock-info" style="margin-top: 8px; justify-content: space-between">
                  <div>
                    <span class="label">成交额：</span>
                    <span class="value">{{ item.business | tenThousandFormat }}</span>
                  </div>
                  <div>
                    <span class="label">明日涨停概率：</span>
                    <span class="value">{{ item.limitupChance | judgeIsNull }}</span>
                  </div>
                </div>
                <AiWencai
                  v-if="isShowWencai"
                  :componentType="1"
                  :askText="item.askText"
                  class="ai-wencai"
                  @click.native="handleClick"
                >
                </AiWencai>
              </div>
            </LimitupPotentiaStock>
          </div>
        </div>
      </atom-popup>
    </template>
    <div v-else class="empty-container"><atom-empty type="search" :title="emptyTips" /></div>
  </Block>
</template>

<script>
import Block from '@/components/common/Block.vue';
import Plate from '@/components/common/Plate.vue';
import LimitupPotentiaStock from '@/components/ztgy/marketHotSpot/LimitupPotentiaStock.vue';
import AiWencai from '@/components/common/AiWencai.vue';

import { reqHotSpot } from '@/apis/index.js';
import { isTimeInRange, errorReport, convertNumber } from '@/scripts/tools.js';
export default {
  components: {
    Block,
    Plate,
    LimitupPotentiaStock,
    AiWencai,
  },
  inject: ['showWencai'],
  data() {
    return {
      hotSpots: [],
      // 当前选中的index
      checkedIndex: 0,
      // 更新时间
      updateTime: '',
      // 涨停数据
      limitups: [],
      // 潜力个股
      potentias: [],
      // 弹框是否展示
      isShow: false,
      emptyTips: '',
    };
  },
  methods: {
    handleClick() {
      window.hxmPageStat(`${_Global.stat.pageId}_rdbk_ztfx`, { url_ver: _Global.stat.url_ver });
    },
    showPopup() {
      window.hxmClickStat(`${_Global.stat.pageId}_rdbk_ztmore`, { url_ver: _Global.stat.url_ver });
      if (this.limitups.length) {
        this.isShow = true;
      } else {
        this.$toast('暂无涨停个股！');
      }
    },
    updateCheckedIndex(index) {
      this.checkedIndex = index;
      const { limitups, potentias } = this.hotSpots[index];
      this.limitups = limitups;
      this.potentias = potentias;
    },
    dealMarketInfo(res) {
      res.data.marketHotPlateDto.forEach(item => {
        const { plateName, plateRate, ztNum, stockContinueLimitUpDays, ztStockList, potentialStockList } = item;
        const limitups = [];
        const potentias = [];
        ztStockList &&
          ztStockList.forEach(ztStock => {
            const {
              stockName,
              price,
              upRisePercent,
              stockContinueLimitUpDays: ztStockContinueLimitUpDays,
              amount,
              limitUpProbability,
              stockCode,
              market,
            } = ztStock;
            limitups.push({
              stockinfo: { name: stockName, nowPrice: price, increase: upRisePercent, stockCode, market },
              consecutiveNum: ztStockContinueLimitUpDays,
              business: amount,
              limitupChance: limitUpProbability,
              askText: `AI分析${stockName}涨停强度`,
            });
          });
        potentialStockList &&
          potentialStockList.forEach(potentialItem => {
            const {
              stockName,
              price,
              upRisePercent,
              geneScore,
              upSpeedPercent,
              amount,
              marketValue,
              stockCode,
              market,
            } = potentialItem;
            potentias.push({
              stockinfo: { name: stockName, nowPrice: price, increase: upRisePercent, stockCode, market },
              limitGene: geneScore,
              acceleration: upSpeedPercent,
              business: amount,
              marketValue: marketValue,
            });
          });
        this.hotSpots.push({
          name: plateName,
          increase: plateRate,
          plateData: [
            { label: '连板家数', value: `${ztNum}家` },
            { label: '连板高度', value: `${stockContinueLimitUpDays || ''}连板` },
          ],
          limitups,
          potentias,
        });
      });
    },
    getHotSpot() {
      reqHotSpot()
        .then(res => {
          const MONTHNUM = 5;
          const DAYNUM = 16;
          this.updateTime = res.data.ctime.slice(MONTHNUM, DAYNUM);
          this.hotSpots = [];
          if (!res.data.marketHotPlateDto?.length) {
            this.emptyTips = isTimeInRange(res.data.ctime, '9:30', '10:30')
              ? '早盘交易未出现明显强势板块'
              : '市场表现弱势，暂无强势板块';
            return;
          }
          // 处理市场数据
          this.dealMarketInfo(res);
          this.updateCheckedIndex(0);
        })
        .catch(err => {
          errorReport({
            name: `市场热点接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
  },
  activated() {
    this.getHotSpot();
  },
  filters: {
    tenThousandFormat(number) {
      return convertNumber(number, 'tenThousand');
    },
    hundredMillionFormat(number) {
      return convertNumber(number, 'hundredMillion');
    },
  },
  computed: {
    isShowWencai() {
      return this.showWencai();
    },
  },
};
</script>
<style lang="less" scoped>
.market-hot-spot {
  padding-right: 0;
  padding-left: 0;
  /deep/.title-contaienr {
    margin-left: 20px;
  }
  /deep/.plates {
    margin-left: 20px;
  }
}
/deep/.atom-empty {
  height: 80%;
}

.empty-container {
  /deep/.atom-empty {
    height: 9rem;
  }
}

.plates {
  margin-top: 24px;
  display: flex;
  padding-right: 20px;

  /deep/.plate:not(:first-child) {
    margin-left: 16px;
  }
}

.stock-container {
  display: flex;
  overflow-x: auto;
  margin-top: 12px;
  padding: 20px 0 4px;
  &::-webkit-scrollbar {
    display: none;
  }
  .placeholder {
    flex-shrink: 0;
    width: 4px;
    height: 660px;
  }

  .limit-ups {
    flex-shrink: 0;
    width: 620px;
    min-height: 660px;
    margin-right: 16px;
    background: var(--bg-color-1);
    box-shadow: 0 0.02rem 8px 0 rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    &.potential {
      /deep/.limitup-stock.not-last {
        padding-bottom: 36px;
      }
    }
    /deep/.limitup-stock {
      margin: 24px;
    }
    /deep/.limitup-stock.not-last {
      padding-bottom: 28px;
    }
    &:first-child {
      margin-left: 20px;
    }

    .title {
      display: flex;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: var(--text-1);
      letter-spacing: 0;
      line-height: 34px;
      font-weight: 400;
      padding: 24px 24px 0;

      .num {
        font-family: PingFangSC-Semibold;
        color: #ff2436;
        font-weight: 600;
      }

      img {
        width: 32px;
        height: 32px;
      }
    }
  }

  /deep/ .stock-info {
    justify-content: space-between;
  }
}

.stock-info {
  display: flex;
  align-items: center;

  .label {
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: var(--text-5);
    line-height: 32px;
    font-weight: 400;
  }

  .value {
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: var(--text-1);
    line-height: 32px;
    font-weight: 400;
  }
}

.container {
  .limitup-stock {
    margin: 24px 32px;
    padding: 24px 0;

    &:nth-child(1) {
      padding-top: 0;
    }
  }

  .pop-title {
    width: 100vw;
    height: 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: var(--text-1);
    text-align: center;
    line-height: 44px;
    font-weight: bold;

    img {
      width: 48px;
      height: 48px;
      position: absolute;
      right: 32px;
      top: 40px;
    }
  }

  .pop-body {
    height: calc(80vh - 128px);
    overflow-y: auto;

    /deep/ .stock-info {
      display: flex;

      .name {
        width: 397px;
      }

      .price-increase {
        flex: 1;
      }
    }
  }
}

.ai-wencai {
  margin-top: 20px;
}

/deep/ svg {
  display: none;
}
</style>
